<template>
  <div class="active-content">
    <el-row>
      <el-col :span="24">
        <el-form :model="mail" :rules="rules2" ref="mailValidateForm">
          <div class="user-form">
            <div class="form-item">
              <div class="title-a">更改邮箱信息</div>
            </div>
            <div style="display: inline-block;" v-loading="mailLoading">
              <div class="form-item">
                <div class="item-title">邮箱账号</div>
                <el-form-item prop="email" class="output">
                  <el-input v-model="mail.email" placeholder="请输入邮箱账号" required></el-input>
                </el-form-item>
              </div>
              <div class="form-item">
                <div class="item-title">授权码</div>
                <el-form-item prop="emailCode" class="output">
                  <el-input v-model="mail.emailCode" placeholder="请输入邮箱授权码" required></el-input>
                </el-form-item>
                <div class="item-btn">
                  <el-button type="primary" @click="onSubmit('mailValidateForm')">确定</el-button>
                </div>
              </div>
            </div>
            <div class="form-item">
              <div class="item-title"></div>
              <el-col :span="6">
                <el-link type="primary" @click="codeInfoContent">如何获取授权码？</el-link>
              </el-col>
            </div>

          </div>
        </el-form>

      </el-col>
    </el-row>
    <el-dialog title="获取授权码" :visible.sync="codeInfoDialogVisible" width="90%" :modal-append-to-body='false' :center="true">
      <div v-html="getCodeInfo" style="height:600px;overflow: auto;">
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import * as commonApi from "api/common";

  export default {
    name: "mail",
    components:{},
    data(){
      return {
        mail: {
          email: '',
          emailCode: '',
        },
        mailLoading: false, //提交邮件加载
        rules2: { // form 表单验证
          email: [
            {required: true, message: '请输入邮箱地址', trigger: 'change' },
            {type: 'email', message: '请输入正确的邮箱', trigger: ['change']}
          ],
          emailCode: [
            {required: true, message: '授权码不能为空', trigger: 'change' }
          ],
        },
        codeInfoDialogVisible: false,
        getCodeInfo: null,
      }
    },
    watch: {
      ['mail.emailCode'](val) {
        this.$nextTick(() => {
          this.mail.emailCode = val.replace(/\s/g,'').replace(/....(?!$)/g,'$& ');
        });
      }
    },
    created() {
      this.getInvoiceMail()
      console.log('----------mail created-------------')
    },
    mounted() {
      console.log('----------mail mounted-------------')
    },
    methods: {
      onSubmit(formName){ //
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (formName === 'mailValidateForm'){ //更新邮箱
              this.updateMail()
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      updateMail(){ // 更新邮箱
        this.mailLoading = true
        let user = JSON.parse(sessionStorage.getItem("user"))
        let userId = user.userId
        const params = {
          userId: userId,
          email: this.mail.email,
          emailCode: this.mail.emailCode.replace(/\s/g, ''),
        }
        commonApi.updateMail(params).then(res => {
          let { data } = res;
          this.mailLoading = false
          if (data.status === 200) {
            // this.$alert("修改成功！！！", "提示",{type: 'success'})
            this.$msg({text: '修改成功！！', type: 'success'})
          } else {
            this.$msg({text: data.msg, type: 'error'})
          }
        })
      },
      codeInfoContent(){ // 查看授权码获取指引
        let routeUrl =this.$router.resolve({path: '/agreement/2'})
        window.open(routeUrl.href, '_blank');

        // if (this.getCodeInfo === null || this.getCodeInfo === '') {
        //   this.getInvoiceProtocolInfo()
        // }
        // this.codeInfoDialogVisible = true
      },
      getInvoiceProtocolInfo(){ // 获取协议内容
        commonApi.findProtocolInfo(2).then(res => {
          let { data } = res;
          if (data.status === 200) {
            this.getCodeInfo = data.data
          }
        })
      },
      getInvoiceMail(){
        let user = JSON.parse(sessionStorage.getItem("user"))
        let userId = user.userId
        const params = {
          userId: userId
        }
        commonApi.getInvoiceMail(params).then(res => {
          let { data } = res;
          if (data.status === 200) {
            if (data.data != null && data.data != undefined) {
              this.mail.email = data.data.email
              this.mail.emailCode = data.data.emailCode
            }
          }
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/them";
  @media screen and (max-width: 1600px){
    .active-content{
      .user-form{
        font-size: 14px;
        font-weight: 500;
        color: $baseFontColor;
        .form-item:first-child{
          padding: 0;
        }
        .form-item{
          height: 40px;
          padding: 10px 0;
          display: flex;
          .title-a{
            width: 120px;
            text-align: right;
            font-size: 14px;
            font-weight: 600;
            color: $baseFontColor;
            padding: 5px 30px 0 0;
          }
          /*输入标题*/
          .item-title{
            width: 120px;
            text-align: right;
            font-size: 13px;
            font-weight: 500;
            color: #999999;
            padding: 10px 30px 10px 0;
          }
          /*输入框*/
          .output{
            width: 260px;
            .el-form-item__content{
              .el-input{
                height: 40px;
              }
            }
          }
          /*确认按钮*/
          .item-btn{
            button{
              width:110px;
              height:40px;
              border-radius: 4px;
              margin-left: 80px;
            }
          }
        }
        /deep/ .el-input__inner{
          background: #F7F7FA;
          border: 1px solid #FFFFFF;
        }
        /deep/ .el-form-item.is-error .el-input__inner{
          border-color: #F56C6C;
        }
        /deep/ .el-input-group__append, .el-input-group__prepend{
          background: #F7F7FA;
          border: 1px solid #FFFFFF;
          border-left: 1px solid #CCCCCC;
        }
        /deep/ .el-input-group__prepend{
          background: #F7F7FA;
          border: 1px solid #FFFFFF;
          border-right: 1px solid #CCCCCC;
        }
      }
    }
  }
  @media screen and (min-width: 1600px){
    .active-content{
      .title-a{
        width: 120px;
        text-align: right;
        font-size: 14px;
        font-weight: 600;
        color: $baseFontColor;
        padding: 5px 30px 0 0;
      }
      .user-form{
        font-size: 14px;
        font-weight: 500;
        color: $baseFontColor;
        .form-item:first-child{
          padding: 0;
        }
        .form-item{
          height: 50px;
          padding: 10px 0;
          display: flex;
          /*输入标题*/
          .item-title{
            width: 120px;
            text-align: right;
            font-size: 14px;
            font-weight: 500;
            color: #999999;
            padding: 10px 30px 10px 0;
          }
          /*输入框*/
          .output{
            width: 300px;
            .el-form-item__content{
              .el-input{
                height: 40px;
              }
            }
          }
          /*确认按钮*/
          .item-btn{
            button{
              width:144px;
              height:40px;
              border-radius: 4px;
              margin-left: 100px;
            }
          }
        }
        /deep/ .el-input__inner{
          background: #F7F7FA;
          border: 1px solid #FFFFFF;
        }
        /deep/ .el-form-item.is-error .el-input__inner{
          border-color: #F56C6C;
        }
        /deep/ .el-input-group__append, .el-input-group__prepend{
          background: #F7F7FA;
          border: 1px solid #FFFFFF;
          border-left: 1px solid #CCCCCC;
        }
        /deep/ .el-input-group__prepend{
          background: #F7F7FA;
          border: 1px solid #FFFFFF;
          border-right: 1px solid #CCCCCC;
        }
      }
    }
  }

</style>
